<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);
  margin-bottom: 80px;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.form-operator-button {
  background-color: #fff;
  position: fixed;
  width: 100%;
  left: 0px;
  right: 0;
  bottom: 33px;
  height: 64px;
  line-height: 64px;
  text-align: right;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.form-el-radion {
  line-height: 30px;
  padding: 5px 0px;
  width: 100%;
}

.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}

.hex-el-tabs {
  border: 1px solid #EBEEF5;
  background-color: #FFF;
  color: #303133;
  transition: .3s;
  border-radius: 4px;
  overflow: hidden;
  padding: 15px;
}
</style>
<template>
  <div>
    <!--工具栏-->
    <div class="head-container" style="margin-top: 5px">
      <crud-operation/>
    </div>
    <!--表格渲染-->
    <el-table v-loading="crud.loading" ref="table" :data="crud.data" style="width: 100%;"
              @select="crud.selectChange" @select-all="crud.selectAllChange"
              @selection-change="crud.selectionChangeHandler" @row-dblclick="toDetail"
              :header-cell-style="{ background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }" border stripe>
      <el-table-column type="selection" width="55"/>
      <el-table-column
        v-if="columns.visible('appCode')"
        :show-overflow-tooltip="true"
        label="应用编码"
        prop="appCode"
      >
      </el-table-column>
      <el-table-column v-if="columns.visible('appStatus')" :show-overflow-tooltip="true" label="应用状态" prop="appStatus">
        <template slot-scope="scope">
          <el-tag size="medium" :type="formatterOrderStatusType(scope.row.appStatus)">
            {{ formatterOrderStatus(scope.row.appStatus) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        v-if="columns.visible('sortStrategy')"
        :show-overflow-tooltip="true"
        label="排序策略"
        prop="sortStrategy"
      />
      <el-table-column
        v-if="columns.visible('weightType')"
        :show-overflow-tooltip="true"
        label="权重策略"
        prop="weightType"
      />
      <el-table-column
        v-if="columns.visible('weight')"
        :show-overflow-tooltip="true"
        label="应用选择权重"
        prop="weight"
      />
    </el-table>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="1400px"
      top="5vh"
      :before-close="handleClose">
      <app-session-detail v-if="dialogVisible" :app-code="appCode"/>
    </el-dialog>
  </div>
</template>
<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import CRUD, {presenter, header, form, crud} from "@crud/crud";
import crudOperation from "@crud/extend/components/CRUD.OnlyLookOperation"
import appSessionDetail from "./components/appSessionDetail";

const queryList = [
  {cloumValue: "appCode", cloumName: "应用编码"}
];

const defaultCrud = CRUD({
  title: "应用列表",
  queryList: queryList,
  queryOnPresenterCreated: false,
  url: 'api/appDef/qryAppSession',
  optShow: {
    add: false,
    edit: false,
    del: false,
    download: false,
    batchUpdateStatus: false,
    batchUpdateBizDate: false,
    cpJob: false,
    proCompleted: false,
    proFailed: false
  }
});
const defaultForm = {};
export default {
  name: "appSession",
  components: {crudOperation, appSessionDetail},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ["app_status", "task_status", "task_track_type"],
  props: {},
  data() {
    return {
      dialogVisible: false,
      appCode: null,
      title: null
    };
  },
  created() {
    this.doQuery()
  },
  methods: {
    doQuery() {
      this.crud.toQuery();
    },
    formatterOrderStatusType(val) {
      const type = ['success', 'danger']
      return type[val]
    },
    formatterOrderStatus(val) {
      return this.dict.label.app_status[val]
    },
    toDetail(row, column, event) {
      this.appCode = row.appCode
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    }
  },
};
</script>
